<template>
	<div>
		<div class="publicpageview">
			<div class="publicformview">
				<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
					<el-row :gutter="20">
						<el-col :span="4">
							<el-form-item label="编号开始：" prop="noStart">
								<el-input v-model="listQuery.noStart"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="编号截至：" prop="noEnd">
								<el-input v-model="listQuery.noEnd"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="合同类型：" prop="type">
								<el-select v-model="listQuery.type">
									<el-option label="住宅" :value="0" key="0"></el-option>
									<el-option label="非住宅直管公产" :value="1" key="1"></el-option>
									<el-option label="非住宅国有自管产" :value="2" key="2"></el-option>
									<el-option label="置换贷款" :value="3" key="3"></el-option>
									<el-option label="非住宅托管" :value="4" key="4"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="状态：" prop="status">
								<el-select v-model="listQuery.status">
									<el-option label="待审核" :value="0" key="0"></el-option>
									<el-option label="市公司已发放" :value="1" key="1"></el-option>
									<el-option label="市房管中心已发放" :value="2" key="2"></el-option>
									<el-option label="正常打印" :value="3" key="3"></el-option>
									<el-option label="打印报废" :value="4" key="4"></el-option>
									<el-option label="退回审核通过" :value="5" key="5"></el-option>
									<el-option label="申请退回" :value="6" key="6"></el-option>
									<el-option label="已登报申明作废" :value="7" key="7"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<div>
								<el-button size="mini" type="primary" @click="getList">查询</el-button>
								<el-button size="mini" @click="
		                pageNum = 1;
		                resetForm('searchForm');
		              ">重置</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div class="publitableview">
				<el-button type="primary" size="mini" @click="handleAddUser('add')">合同文本申请</el-button>
				<el-button type="primary" size="mini" @click="lookminxi">查看租凭合同发放明细</el-button>
				<!-- <el-button type="primary" size="mini" @click="gotoDaYin"
		      >合同文本打印</el-button
		    > -->

				<el-table :data="list" border fit highlight-current-row size="mini" id="printMe">
					<el-table-column align="center" label="合同编号开始" prop="noStart">
					</el-table-column>

					<el-table-column align="center" label="合同编号截至" prop="noEnd">
					</el-table-column>

					<el-table-column align="center" label="合同类型" prop="type">
						<template slot-scope="scope">
							<span>{{
		            scope.row.type == 1
		              ? "非住宅直管公产"
		              : scope.row.type == 2
		              ? "非住宅国有自管产"
		              : scope.row.type == 3
		              ? "置换贷款"
		              : scope.row.type == 4
		              ? "非住宅托管"
		              : ""
		          }}</span>
						</template>
					</el-table-column>

					<el-table-column align="center" label="申请日期" prop="applyTime">
					</el-table-column>

					<el-table-column align="center" label="审批日期" prop="authTime">
					</el-table-column>

					<el-table-column align="center" label="申请合同数量" prop="counts">
					</el-table-column>

					<el-table-column align="center" label="申请人员" prop="applyTime">
					</el-table-column>

					<el-table-column align="center" label="状态" prop="status">
						<template slot-scope="scope">
							<span>
								{{
		              scope.row.status == 0
		                ? "待审核"
		                : scope.row.status == 1
		                ? "市公司已发放"
		                : scope.row.status == 2
		                ? "市房管中心已发放"
		                : scope.row.status == 3
		                ? "正常打印"
		                : scope.row.status == 4
		                ? "打印报废"
		                : scope.row.status == 5
		                ? "退回审核通过"
		                : scope.row.status == 6
		                ? "申请退回"
		                : scope.row.status == 7
		                ? "已登报申明作废"
		                : ""
		            }}</span>
						</template>
					</el-table-column>

					<el-table-column align="center" label="操作" width="260">
						<template slot-scope="scope">
							<!-- <el-button type="text" size="mini" @click="handleTijiao(scope.row.id)"
								:disabled="scope.row.isSubmit == 0 ? false : true">提交</el-button>

							<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'fafangdengji')"
								:disabled="scope.row.isFafang == 0 ? false : true">发放登记</el-button>

							<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'shenhe')">审批</el-button>
							<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
							<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'details')">详情</el-button> -->
							<el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="publicpaginationview">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
				</div>
			</div>

			<el-dialog :title="
		      isAdd == 'add'
		        ? '新增合同文本'
		        : isAdd == 'update'
		        ? '修改合同文本'
		        : isAdd == 'fafangdengji'
		        ? '合同发放登记'
		        : isAdd == 'shenhe'
		        ? '审核'
		        : '合同文本详情'
		    " :visible.sync="dialogVisible" width="45%" :before-close="handleClose">
				<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="120px"
					size="mini">
					<el-form-item label="区属：" prop="districtName">
						<el-input v-model="formData.districtName" disabled></el-input>
					</el-form-item>
					<el-form-item label="单位名称：" prop="houseAdminName">
						<el-input v-model="formData.houseAdminName" disabled></el-input>
					</el-form-item>
					<el-form-item label="经办人：" prop="persional">
						<el-input v-model="formData.persional" :disabled="isAdd == 'shenhe' || isAdd == 'fafangdengji'"></el-input>
					</el-form-item>
					<el-form-item label="申请时间：" prop="applyTime">
						<el-date-picker :disabled="isAdd == 'shenhe' || isAdd == 'fafangdengji'" v-model="formData.applyTime"
							type="date" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>

					<el-form-item label="申请数量：" prop="counts">
						<el-input v-model="formData.counts" :disabled="isAdd == 'shenhe' || isAdd == 'fafangdengji'"></el-input>
					</el-form-item>
					<el-form-item label="合同类型：" prop="type">
						<el-select v-model="formData.type" :disabled="isAdd == 'shenhe' || isAdd == 'fafangdengji'">
							<el-option label="住宅" :value="住宅" key="0"></el-option>
							<el-option label="非住宅直管公产" :value="非住宅直管公产" key="1"></el-option>
							<el-option label="非住宅国有自管产" :value="非住宅国有自管产" key="2"></el-option>
							<el-option label="置换贷款" :value="置换贷款" key="3"></el-option>
							<el-option label="非住宅托管" :value="非住宅托管" key="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注：" prop="note">
						<el-input v-model="formData.note" :disabled="isAdd == 'shenhe' || isAdd == 'fafangdengji'"></el-input>
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="handleClose" size="medium" v-if="
		          isAdd == 'details' || isAdd == 'shenhe' || isAdd == 'fafangdengji'
		        ">返 回</el-button>

					<el-button type="primary" @click="save" size="medium" v-if="isAdd != 'details'">{{
		          isAdd == "shenhe"
		            ? "审 核"
		            : isAdd == "fafangdengji"
		            ? "发放登记"
		            : "保 存"
		        }}</el-button>
				</span>
			</el-dialog>
		</div>
		<!-- <button v-print="printObj">打印局部区域</button> -->
		<!-- <div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
import dayjs from 'dayjs'
	import {
		listContract,
		createContract,
		submitContract,
		faFangContract,
		deleteContractById,
		authContract,
		updateContract,
	} from "@/api/management";
	import {
		Message
	} from "element-ui";
	import moment from "moment";

	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					noEnd: "",
					noStart: "",
					status: null,
					type: null,
				},
				total: 0,
				list: [],
				listLoading: false,
				dialogVisible: false,
				isAdd: "add",
				formData: {
					districtName: "",
					houseAdminName: "",
					counts: "",
					applyTime: "",
					note: "",
					persional: "",
					type: null,
				},
				printLoading: true,
				printObj: {
					id: "printMe",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				}
			};
		},

		computed: {},

		mounted() {
			this.formData.districtName = localStorage.getItem('userDname')
			this.formData.houseAdminName = localStorage.getItem('userHouseAdminName')
			this.getList();
		},

		methods: {
			save() {
				if (this.isAdd == "add") {
					createContract({
						...this.formData,
						counts: Number(this.formData.counts),
						applyTime: this.formData.applyTime
						  ? dayjs(this.formData.applyTime).format('YYYY-MM-DD HH:mm:ss')
						  : ''
					}).then((res) => {
						Message({
							message: res.message || "操作成功",
							type: "success",
							duration: 3 * 1000,
						});
						this.handleClose();
						this.getList();
					});
				}

				if (this.isAdd == "fafangdengji") {
					faFangContract(this.formData.id).then((res) => {
						Message({
							message: res.message || "操作成功",
							type: "success",
							duration: 3 * 1000,
						});
						this.handleClose();
						this.getList();
					});
				}

				if (this.isAdd == "shenhe") {
					authContract(this.formData.id).then((res) => {
						Message({
							message: res.message || "操作成功",
							type: "success",
							duration: 3 * 1000,
						});
						this.handleClose();
						this.getList();
					});
				}

				if (this.isAdd == "update") {
					updateContract({
						...this.formData,
						counts: Number(this.formData.counts),
						applyTime: this.formData.applyTime
						  ? dayjs(this.formData.applyTime).format('YYYY-MM-DD HH:mm:ss')
						  : ''
					}).then((res) => {
						Message({
							message: res.message || "操作成功",
							type: "success",
							duration: 3 * 1000,
						});
						this.handleClose();
						this.getList();
					});
				}
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			getList() {
				listContract(this.listQuery).then((response) => {
					this.total = response.data.total;
					this.list = response.data.list;
				});
			},

			resetForm(val) {
				this.$refs[val].resetFields();
			},

			handleAddUser(type) {
				this.isAdd = "add";
				this.dialogVisible = true;
			},
			lookminxi(){
				this.$router.push('hetongwenbenminxi')
			},
			gotoDaYin() {
				this.$router.push({
					path: 'wenbendaying'
				})
			},
			handleClose() {
				this.resetForm("dataForm");
				this.dialogVisible = false;
			},

			handleUpdate(currentData, type) {
				this.isAdd = type;
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.formData = {
						...currentData
					};
				});
			},

			handleTijiao(id) {
				this.$confirm("请确认是否提交当前文本合同", "提交提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						submitContract(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.getList();
						});
					})
					.catch(() => {});
			},

			handleDelete(id) {
				this.$confirm("此操作将删除该条内容，请确认是否继续操作？", "删除提示", {
						confirmButtonText: "保 存",
						cancelButtonText: "取 消",
						type: "warning",
					})
					.then(() => {
						deleteContractById(id).then((res) => {
							Message({
								message: res.message || "操作成功",
								type: "success",
								duration: 3 * 1000,
							});
							this.getList();
						});
					})
					.catch(() => {});
			},
		},
	};
</script>